<template>
  <drag-div>
    <div slot="left" class="m" style="height: 100%;margin: 0">
      <left-workflow-type
        @handleNodeClick="handleNodeClick"
      ></left-workflow-type>
    </div>
    <div slot="right" style="padding:10px;">
      <el-row>
        <div class="p10">
          <el-col :span="24">
            <div>
              <el-row :gutter="4">
                <el-form :inline="true">
                  <el-form-item label="标题:">
                    <el-input
                      placeholder="请输入标题"
                      v-model="searchDto.title"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="时间:">
                    <el-date-picker
                      v-model="value4"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                    ></el-date-picker>
                  </el-form-item>
                  <el-form-item class="clear_item-margin-bottom">
                    <el-button
                      type="primary"
                      icon="el-icon-search"
                      @click="getPageData()"
                      >查询
                    </el-button>
                    <el-button
                      type="primary"
                      icon="el-icon-s-open"
                      @click="clear()"
                      >重置
                    </el-button>
                    <el-button
                      type="danger"
                      icon="el-icon-phone"
                      @click="remindByInstanceList(0)"
                    >
                      催办
                    </el-button>
                    <el-button
                      type="danger"
                      icon="el-icon-phone-outline"
                      @click="remindByInstanceList(1)"
                    >
                      一键催办
                    </el-button>
                  </el-form-item>
                </el-form>
              </el-row>
            </div>
            <div class="table_content">
              <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="全部" name="all"> </el-tab-pane>
                <el-tab-pane label="已完结" name="first"> </el-tab-pane>
                <el-tab-pane label="未完结" name="second"> </el-tab-pane>
                <el-tab-pane label="已终止" name="third"></el-tab-pane>
                <el-tab-pane label="已归档" name="archive"></el-tab-pane>
              </el-tabs>
              <page-table
                ref="multipleSelection"
                :page-data="pageData"
                :loading="loading"
                :select-change="handleSelectionChange"
                :do-get-page-data="getPageData"
              >
                <el-table-column
                  :selectable="selectable"
                  type="selection"
                  align="center"
                  width="50"
                >
                </el-table-column>
                <el-table-column
                  prop="title"
                  width="220"
                  show-overflow-tooltip
                  label="标题"
                  align="left"
                >
                  <template slot-scope="scope">
                    <a class="task_title_a" @click="taskEdit(scope.row)">{{
                      scope.row.title
                    }}</a>
                  </template>
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  prop="flowName"
                  label="流程"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="stepName"
                  show-overflow-tooltip
                  label="所在步骤"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="receiverName"
                  label="处理人"
                  show-overflow-tooltip
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="receiveTime"
                  label="发起日期"
                  align="center"
                  show-overflow-tooltip
                  width="200"
                >
                </el-table-column>
                <el-table-column
                  prop="instanceStatus"
                  label="状态"
                  show-overflow-tooltip
                  align="center"
                >
                  <template slot-scope="scope">
                    <sz-badge
                      :value="
                        !scope.row.archiveStatus
                          ? scope.row.instanceRunStatus &&
                            scope.row.instanceRunStatus == 'END'
                            ? '已终止'
                            : scope.row.instanceStatus
                            ? '已完结'
                            : '未完结'
                          : '已归档'
                      "
                      :type="statusStyle(scope.row)"
                    ></sz-badge>
                  </template>
                </el-table-column>
                <el-table-column
                  label="管理"
                  width="150"
                  align="center"
                  fixed="right"
                >
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      size="mini"
                      @click="showFlowNode(scope.row)"
                    >
                      流程轨迹
                    </el-button>
                  </template>
                </el-table-column>
              </page-table>
            </div>
          </el-col>
        </div>

        <el-dialog
        :close-on-click-modal="false"
          :visible.sync="showFlowNodeHistory"
          v-if="showFlowNodeHistory"
          title="流程轨迹:"
          width="40%"
          destroy-on-close
        >
          <el-row>
            <el-col>
              <flow-node-history :task-id="curTaskId"></flow-node-history>
            </el-col>
            <el-col :span="24" class="mt20" slot="footer">
              <span>
                <el-button size="small" @click="showFlowNodeHistory = false"
                  >取消</el-button
                ></span
              >
            </el-col>
          </el-row>
        </el-dialog>
      </el-row>
    </div>
  </drag-div>
</template>
<script>
import { mapGetters } from "vuex";
import flowNodeHistory from "./flowNodeHistory";
import leftWorkflowType from "./leftWorkflowType";
import Moment from "moment";
export default {
  name: "mylApplyTask",
  created() {
    this.initData();
    console.log(111111111);
  },
  mounted() {},
  watch: {
    $route(to, from) {
      console.log(to, from);
      this.initData();
    }
  },
  data() {
    return {
      openType:'blank',// blank外部打开 inner内部打开；默认外部
      value4: [],
      activeName: "all",
      showFlowNodeHistory: false,
      loading: false,
      searchDto: {
        categoryId: "",
        pageSize: 10,
        pageIndex: "",
        title: "",
        sender: "",
        flowId: "",
        startTime: "",
        endTime: "",
        status: ""
      },
      pageData: {},
      multipleSelection: [],
      curTaskId: "", // 当前任务id
      categoryNow: "", //当前选择左侧分类
      statusNow: "" //当前选择状态
    };
  },
  computed: {
    ...mapGetters({})
  },
  methods: {
    //禁用多选框
    selectable(row, index) {
      if (row.instanceStatus == true || row.instanceRunStatus) {
        return false; //禁用
      } else {
        return true; //可操作
      }
    },
    //多选事件
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 批量催办
    remindByInstanceList(operate) {
      let ids = null;
      let msg = "";
      if (operate === 0) {
        if (this.multipleSelection.length == 0) {
          this.warning("请至少选择一条实例");
          return;
        }
        ids = [];
        this.multipleSelection.map(item => {
          ids.push(item.instanceId);
        });
        msg = "确认催办选中实列?";
      } else {
        msg = "确认一键催办?";
      }
      this.$confirm(msg, "提示", {})
        .then(() => {
          let tem = { body: ids };
          this.API.remindMyLaunchByInstanceList(tem).then(ret => {
            this.$message({
              message: "批量催办成功",
              type: "success"
            });
          });
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 状态颜色设置
    statusStyle(row) {
      let cls = "";
      switch (row.instanceStatus) {
        case true:
          cls = "success";
          break;
        default:
          cls = "warning";
          break;
      }
      switch (row.instanceRunStatus) {
        case "END":
          cls = "danger";
          break;
      }
      return cls;
    },
    initData() {
      this.searchDto.flowId = this.$route.query.flowId;

      this.getPageData();
    },
    handleClick(tab, event) {
      let status = "";
      switch (tab.paneName) {
        case "all":
          status = "";
          break;
        case "first":
          status = 1;
          break;
        case "second":
          status = 0;
          break;
        case "third":
          status = 2;
          break;
        case "archive":
          status = 3;
          break;
      }

      this.statusNow = status;
      this.searchDto.pageIndex = 1;
      this.searchDto.status = this.statusNow;
      this.getPageData();
    },
    // 显示流程轨迹面板
    showFlowNode(row) {
      this.curTaskId = row.id;
      console.log(this.curTaskId);
      this.showFlowNodeHistory = true;
    },
    // 跳转任务处理
    taskEdit(row) {
      if (this.$route.query.openType) {
        this.openType = this.$route.query.openType
      }
      if(this.openType === 'blank') {
        let routeData = this.$router.resolve({
          path: "/workflow/apply",
          query: {flowId: row.flowId, taskId: row.id}
        });
        this.openPage(routeData.href);
      }else {
        this.$router.push({name:'workflowApplyInner',  query: { flowId: row.flowId, taskId: row.id ,cr: true}})
      }
    },

    // 左侧分类树的单击事件
    handleNodeClick(val) {
      this.searchDto = {
        categoryId: "",
        pageSize: 10,
        pageIndex: "",
        title: "",
        sender: "",
        flowId: "",
        startTime: "",
        endTime: "",
        status: this.statusNow
      };
      if (val.type !== "CATEGORY") {
        this.searchDto.flowId = val.id;
      } else {
        this.categoryNow = val.id;
        this.searchDto.categoryId = this.categoryNow;
      }
      this.getPageData();
    },
    // 工作待办任务分页列表
    getPageData(val) {
      this.searchDto.startTime = "";
      this.searchDto.endTime = "";
      if (this.value4 && this.value4.length > 0) {
        this.searchDto.startTime = Moment(this.value4[0]).format("YYYY-MM-DD");
        this.searchDto.endTime = Moment(this.value4[1]).format("YYYY-MM-DD");
      }
      let tem = Object.assign(this.searchDto, val);
      this.API.getWorkflowTaskInstanceLaunchPageList(tem).then(res => {
        this.pageData = res.data;
        console.log("this.pageData", this.pageData);
      });
    },
    //数据待办任务删除
    delWorkForm(row) {
      this.$confirm("确认删除当前待办任务?", "提示", {})
        .then(() => {
          let tem = {
            id: row.id
          };
          this.API.deleteWorkflowFormById(tem).then(res => {
            this.success("删除成功");
            this.getPageData();
          });
        })
        .catch(() => {});
    },
    // 编辑待办任务
    editWorkForm(row) {
      let data = "/formDesign.html#/?operate=update&formId=" + row.id;
      window.open(data, "_blank");
    },
    // 发布待办任务
    publishWorkForm(row) {
      this.$confirm("确认发布当前待办任务?", "提示", {})
        .then(() => {
          if (row.id) {
            this.API.publishWorkflowFormById({ id: row.id }).then(res => {
              this.success("发布待办任务成功!");
            });
          }
        })
        .catch(() => {});
    },
    // 新建待办任务
    newWorkForm() {
      let data = "/formDesign.html#/?operate=create";
      window.open(data, "_blank");
    },
    clear() {
      this.searchDto = {
        categoryId: "",
        pageSize: 10,
        title: "",
        sender: "",
        flowId: "",
        startTime: "",
        endTime: "",
        status: ""
      };
      this.value4 = [];
      this.getPageData();
    }
  },
  components: {
    flowNodeHistory,
    leftWorkflowType
  }
};
</script>

<style scoped></style>
